@import "tailwindcss";

@theme {
    --color-gray-100: #f5f5f5;
    --color-gray-200: #eeeeee;
    --color-gray-300: #dbdbdb;
    --color-gray-400: #c2c2c2;
    --color-gray-500: #9e9e9e;
    --color-gray-600: #7e7e7e;
    --color-gray-700: #626262;
    --color-gray-800: #484848;
    --color-gray-900: #333333;

    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
}

/*
  在这里添加你的 CSS 变量
  可以在这个网站上生成调色板: https://uicolors.app/create
*/
@source './src/**/*.{vue,ts,tsx,js,jsx}';

@variant dark (&:where(.dark, .dark *));

:root {
    font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
    line-height: 1.5;
    font-weight: 400;

    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    font-weight: 500;
    color: #646cff;
    text-decoration: inherit;
}

a:hover {
    color: #535bf2;
}

.dark a {
    color: #61afef;
}

.dark a:hover {
    color: #535bf2;
}

h1 {
    font-size: 3.2em;
    line-height: 1.1;
}

@media (prefers-color-scheme: light) {
    :root {
        color: #213547;
        background-color: #ffffff;
    }

    a:hover {
        color: #747bff;
    }

    button {
        background-color: #f9f9f9;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        color: rgba(255, 255, 255, 0.87);
        background-color: #1a1a1a;
    }

    a:hover {
        color: #747bff;
    }
}

.jetbrains-font {
    font-family: "Jetbrains Mono", monospace;
}

.gradient-text {
    @apply bg-clip-text text-transparent fill-transparent;
    background-image: -webkit-linear-gradient(-64deg, #f9bf65, #ffab6b, #ff9977, #fc8986, #ef7e95, #e47da6, #d37fb5, #bf83c1, #ab8dcf, #9597d8, #7fa0dc, #6ca7da);
}